<template>
    <div id="lineChat" class="overflow-x-auto w-full h-60"></div>
</template>

<script setup>
import * as echarts from 'echarts'
import { watch } from 'vue'

const props = defineProps({
    value: {
        type: Object,
        defalut: null
    }
})

// 初始化折线图
function initLineChat() {
    var chartDom = document.getElementById('lineChat');
    var myChart = echarts.init(chartDom, null, { width: 600 });
    var option;

    // 从 props 中间获取数据
    const pvCounts =  props.value.pvCounts
    const pvDates = props.value.pvDates

    option = {
    xAxis: {
        type: 'category',
        data: pvDates
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
        data: pvCounts,
        type: 'line'
        }
    ]
    };

    option.tooltip = { trigger: 'axis' }

    option && myChart.setOption(option);
}

// 构建初始化
watch(() => props.value , () => initLineChat())
</script>